<template>
  <div :class="prefixCls" class="login-background-img">
    <a-spin :tip="loginTip" :spinning="loginSpinning" :wrapperClassName="loginSpinning ? 'login-spin' : ''"
      size="large">
      <div v-show="type === 'login'">
        <div class="aui-content">
          <div class="aui-container" v-show="isShowLogin">
            <div class="aui-form">
              <div class="aui-image">
                <div class="aui-image-text">
                  <!-- <img :src="adTextImg" /> -->
                </div>
              </div>
              <div class="aui-formBox">
                <div class="aui-formWell">
                  <div class="aui-flex aui-form-nav investment_title">
                    <div class="aui-flex-box sys-title">{{ t('sys.login.systemTitle') }} </div>
                  </div>
                  <div class="aui-flex aui-form-nav investment_title">
                    <div class="aui-flex-box activeNav on">{{ t('sys.login.signInFormTitle') }} </div>
                  </div>
                  <div class="aui-form-box" style="height: 180px">
                    <a-form ref="loginRef" :model="formData" @keyup.enter.native="loginHandleClick">
                      <div class="aui-account">
                        <div class="aui-inputClear">
                          <i class="icon icon-code"></i>
                          <a-form-item>
                            <a-input class="fix-auto-fill" :placeholder="t('sys.login.userName')"
                              v-model:value="formData.username" />
                          </a-form-item>
                        </div>
                        <div class="aui-inputClear">
                          <i class="icon icon-password"></i>
                          <a-form-item>
                            <a-input class="fix-auto-fill" type="password" :placeholder="t('sys.login.password')"
                              v-model:value="formData.password" />
                          </a-form-item>
                        </div>
                        <div class="aui-inputClear">
                          <i class="icon icon-code"></i>
                          <a-form-item>
                            <a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.inputCode')"
                              v-model:value="formData.inputCode" />
                          </a-form-item>
                          <div class="aui-code">
                            <img v-if="randCodeData.requestCodeSuccess" :src="randCodeData.randCodeImage"
                              @click="handleChangeCheckCode" />
                            <img v-else style="margin-top: 2px; max-width: initial" :src="codeImg"
                              @click="handleChangeCheckCode" />
                          </div>
                        </div>
                        <div class="aui-flex">
                          <div class="aui-flex-box">
                            <div class="aui-choice">
                              <a-input class="fix-auto-fill" type="checkbox" v-model:value="rememberMe" />
                              <span style="margin-left: 5px">{{ t('sys.login.rememberMe') }}</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </a-form>

                  </div>
                  <div class="aui-formButton">
                    <div class="aui-flex">
                      <a-button :loading="loginLoading" class="aui-link-login" type="primary" @click="loginHandleClick">
                        {{ t('sys.login.loginButton') }}</a-button>
                    </div>
                  </div>
                  <div class="aui-formButton" style="width: 100%; text-align: center; color: #409eff; cursor: pointer"
                    @click="returnClock">
                    返回打卡页面
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-show="!isShowLogin">
            <div class="aui-formBox1 aui-container1">
              <div class="aui-flex-box sys-title">{{ t('sys.login.systemTitle') }} </div>
              <a-card :title="loginUserInfo?.userInfo?.seat?.name || seatName || '席位名称'" class="login-card"
                style="width: 240px; margin-top: 40px">
                <template #extra> </template>
                <div class="card-content">
                  <!-- {{"dssd==="+ getFileAccessHttpUrl(loginUserInfo?.userInfo?.avatar) }} -->
                  <Icon icon="mdi:account" size="120" v-if="!loginUserInfo?.userInfo?.avatar" />

                  <a-image :width="100" style="border-radius: 50%" :height="100"
                    :src="getFileAccessHttpUrl(loginUserInfo?.userInfo?.avatar)" v-else
                    fallback="" />
                  <div style="margin-top: 10px">{{ loginUserInfo?.userInfo?.realname || '人员名称' }}</div>
                  <div style="margin-top: 10px">{{ loginUserInfo?.userInfo?.roleName || '管制员资质名称' }}</div>
                </div>
                <!--判断这个席位是否有人-->
                <template #actions v-if="seatData.realname">
                  <div class="card-bottom" v-if="!seatData.offTimeLine && isLogin">
                    <span class="card-bottom-label">在岗时长：</span>
                    <span class="card-bottom-value">{{ seatData.onlineTime }}</span>
                  </div>
                  <div class="card-bottom" v-if="seatData.offTimeLine && isLogin">
                    <span class="card-bottom-label">离岗倒计时：</span>
                    <span class="card-bottom-value card-bottom-red">{{ seatData.offTimeLine }}</span>
                  </div>
                </template>
              </a-card>
              <div class="login-card-bottom">
                <div class="login-card-bottom-card blue-bg" v-if="!isLogin" @click="faceLogin">
                  <CheckCircleFilled :style="{ fontSize: '30px', color: '#fff' }" />
                  <p>上班打卡</p>
                </div>
                <div class="login-card-bottom-card green-bg" v-if="isLogin" @click="faceLogin">
                  <Icon icon="ri:arrow-up-down-fill" :style="{ fontSize: '30px', color: '#fff' }" />
                  <p>换岗打卡</p>
                </div>
                <div class="login-card-bottom-card yellow-bg" @click="checkOutTemp"
                  v-if="isLogin && !userStore.getCheckOutTempFlag">
                  <PauseCircleFilled :style="{ fontSize: '30px', color: '#fff' }" />
                  <p>临时离岗</p>
                </div>
                <div class="login-card-bottom-card blue-bg" @click="checkIn"
                  v-if="isLogin && userStore.getCheckOutTempFlag">
                  <CheckCircleFilled :style="{ fontSize: '30px', color: '#fff' }" />
                  <p>回岗打卡</p>
                </div>
                <div class="login-card-bottom-card red-bg" @click="checkOut" v-if="isLogin">
                  <LogoutOutlined :style="{ fontSize: '30px', color: '#fff' }" />
                  <p>下岗打卡</p>
                </div>
              </div>
              <div class="login-card-bottom text-color" @click="enterLogin"> 进入后台管理 </div>
            </div>
          </div>
        </div>
      </div>
      <FloatButtonGroup shape="circle">
        <FloatButton :badge="{ count: violationNoticeData.length }" @click="handleNotification">
          <template #icon>
            <CopyTwoTone />
          </template>
        </FloatButton>
      </FloatButtonGroup>
    </a-spin>
  </div>
</template>
<script lang="ts" setup name="login-mini">
import { getCaptcha, getCodeInfo, GetUserCheckInList, GetViolationNoticeList, GetListSeatUser } from '/@/api/sys/user';
import { list } from '/@/views/admin/seat/Seat.api'
import { onMounted, reactive, ref, toRaw, unref, onUnmounted, computed } from 'vue';
import codeImg from '/@/assets/images/checkcode.png';
import { useUserStore } from '/@/store/modules/user';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { useDesign } from '/@/hooks/web/useDesign';
import { useAppInject } from '/@/hooks/web/useAppInject';
import { createFromIconfontCN, CheckCircleFilled, PauseCircleFilled, LogoutOutlined, UserOutlined, CopyTwoTone } from '@ant-design/icons-vue';
import { useModal } from '@/components/Modal';
import { Icon } from '/@/components/Icon';
import { useUserStoreWithOut } from '/@/store/modules/user';
import { VIOLATIONRULE_LEAVETEMP_TIME } from '/@/enums/ruleEnum';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration'; // ES 2015
import { FloatButton, FloatButtonGroup, message } from 'ant-design-vue';
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
dayjs.extend(duration);
let violationTime: any = '';
let violationNoticeData = ref([]);
let checkOutStatu = ref(0); //回岗标记 //0 代表离岗，1 代表下岗，2代表回岗，3代表的是上班打卡
let loginSpinning = ref(false); //打卡的加载中
let loginTip = ref('打卡中...'); //loading的状态
let faceLoginResultTime: any = ''; //登录结果定时器
let seatName = ref('');//通过ip查询出席位名称
const seatData = ref({
  seatId: 1,
  avatar: '',//人脸头像
  realname: '人员名称',//人名称
  roleName: '管制员资质名称',//角色名称（资质名称）
  seatName: '主班管制席',//座席名称
  onlineOrOff: true,//在岗或离岗
  offTime: 0,//离岗规定时长（分钟）
  onlineTime: '--时--分',//在岗时长
  isUse: true,//是否在使用
  offStartTime: 1732540214000,//离岗开始时间
  offTimeLine: ''//
});
const { prefixCls } = useDesign('mini-login');
const { notification, createMessage } = useMessage();
const userStore = useUserStore();
const { t } = useI18n();
const randCodeData = reactive<any>({
  randCodeImage: '',
  requestCodeSuccess: false,
  checkKey: null,
});
const rememberMe = ref<string>('0');
//手机号登录还是账号登录
const activeIndex = ref<string>('accountLogin');
const type = ref<string>('login');
//账号登录表单字段
const formData = reactive<any>({
  inputCode: '',
  username: '',
  password: '',
});
const loginRef = ref();
const loginLoading = ref<boolean>(false);
const isShowLogin = ref(false); //是否显示登录的窗口
const isLogin = ref(false); //是否已登录
let intervalOutTime = ref();
let durationValue = ref(0); //在岗时长
let durationTimeIn = ref();
let seatListTime = ref();
const loginUserInfo = computed(() => userStore.getLoginUserInfo);
let clientIp = ref('');//要登录的ip

defineProps({
  sessionTimeout: {
    type: Boolean,
  },
});

/**
 * 获取验证码
 */
function handleChangeCheckCode() {
  formData.inputCode = '';
  randCodeData.checkKey = 1629428467008;
  getCodeInfo(randCodeData.checkKey).then((res) => {
    randCodeData.randCodeImage = res;
    randCodeData.requestCodeSuccess = true;
  });
}
/**
 * 账号登录
 */
async function loginHandleClick() {
  accountLogin()
}
/**
 * 上班打卡人脸登录
 */
const faceLogin = async () => {


  try {
    await getIpConfig();
    loginSpinning.value = true;
    loginTip.value = '打卡中...';
    const { success, message: msg } = await userStore.faceLogin(
      toRaw({
        username: 'admin',
        clientIp: clientIp.value,
      })
    );
    if (success) {
      faceLoginSuccess(true);
    } else {
      faceLoginFail(msg);
    }
  } catch (error) {
    faceLoginFail('');
  }
};
/**
 * 扫脸登录成功方法
 */
const faceLoginSuccess = (loading: boolean) => {
  loginSpinning.value = loading;
  localStorage.setItem('loginTip', 'true');
  localStorage.setItem('loginIp', '192.168.10.101');
};
/**
 * 扫脸登录失败接口
 * @param msg
 */
const faceLoginFail = (msg: any | null | '') => {
  if (msg) {
    message.error(msg);
  }
  localStorage.setItem('loginTip', 'false');
  localStorage.setItem('loginIp', '');
  loginSpinning.value = false;
  loginTip.value = '';
};
/**
 * 所有的定时器方法
 */
const timerFunction = () => {
  //判断当前有没有登录成功

  if (loginUserInfo.value && Object.keys(loginUserInfo.value).length > 0 && checkOutStatu.value != 3) {
    getUserCheckInList();
    getUserSeatList();
    violationTime = setInterval(() => {
      if (checkOutStatu.value != 3) {
        getViolationNoticeList();
      }

    }, 10000);
    getViolationNoticeList();
  }
  if (userStore.getToken) {
    seatListTime.value = setInterval(() => {
      seatList()
    }, 5000)
  }
  faceLoginResultTime = setInterval(() => {
    getFaceResultFunction();
  }, 1000);
};
/**
 * 获取人脸打卡结果
 */
const getFaceResultFunction = async () => {
  let loginTipLocal = computed(() => localStorage.getItem('loginTip'));
  if (loginTipLocal.value && loginTipLocal.value == 'true') {
    //TODO执行轮询查询打卡结果
    loginSpinning.value = true;
    loginTip.value = '打卡中...';
    try {
      const {
        success,
        result,
        message: msg,
      } = await userStore.getFaceLoginResult(
        toRaw({
          username: 'admin',
          clientIp: clientIp.value,
        })
      );
      if (success && result) {
        //调用这个时告诉可以启动定时器了
        faceLoginFail('');
        //设置回岗标记
        await userStore.setCheckOutTempFlag(false);
        checkOutStatu.value = 1;
        handleLogin();
        getUserCheckInList();
        getUserSeatList();
        //清除人脸轮询结果定时器
        // clearTime(3);
        seatListTime.value = setInterval(() => {
          seatList()
        }, 5000)
      } else if (!success) {
        faceLoginFail(msg);
      }
    } catch (error) {
      faceLoginFail('');
    }
  }
};
const getUserSeatList = () => {
  //清除在岗时常长定时器
  clearTime(4);
  let id = userStore.getLoginUserInfo?.userInfo?.seat?.id;
  GetListSeatUser(
    {
      id,
    },
    'none'
  ).then((res) => {
    if (res.records.length && res.records[0].duration) {
      durationValue.value = res.records[0].duration;
      seatData.value.onlineTime = dayjs.duration(durationValue.value * 60 * 1000).format('HH时mm分ss秒');
      durationTimeIn.value = setInterval(() => {
        durationValue.value = durationValue.value + 1 / 60;
        seatData.value.onlineTime = dayjs.duration(durationValue.value * 60 * 1000).format('HH时mm分ss秒');
      }, 1000);
    }
  });
};
/**
 * 获取用户席位打卡记录
 */
const getUserCheckInList = () => {
  if (intervalOutTime.value) {
    clearInterval(intervalOutTime.value);
    intervalOutTime.value = '';
    seatData.value.offTimeLine = '';
  }
  let userId = userStore.getLoginUserInfo?.userInfo?.id;
  let seatId = userStore.getLoginUserInfo?.userInfo?.seat?.id;
  let ruleList = userStore.getLoginUserInfo?.ruleList; //规则
  GetUserCheckInList(
    {
      userId,
      seatId,
      column: 'createTime',
      order: 'desc',
    },
    'none'
  ).then((res) => {
    if (res.records.length && res.records[0].checkOutTime) {
      let obj = ruleList.find((item) => {
        return item.ruleKey == VIOLATIONRULE_LEAVETEMP_TIME;
      });
      if (obj) {
        console.log("离岗数据")
        // 离岗倒计时： 离岗时间 + 离岗规则时间 - 当前时间
        intervalOutTime.value = setInterval(() => {
          if (res.records[0].checkOutTime) {
            let outTime = dayjs(res.records[0].checkOutTime).valueOf() + Number(obj.val) * 60 * 1000 - dayjs().valueOf();
            if (outTime >= 0) {
              seatData.value.offTimeLine = dayjs(outTime).format('mm分ss秒');
            } else {
              seatData.value.offTimeLine = '已超时';
              if (intervalOutTime.value) {
                clearInterval(intervalOutTime.value);
                intervalOutTime.value = '';
              }
            }
          }
        }, 1000);
        console.log("离岗数据", seatData.value.offTimeLine)
      }
    }
  });
};
/**
 * 下班打卡
 */
const checkOut = async () => {
  const data = await userStore.checkOut();
  //设置回岗标记
  await userStore.setCheckOutTempFlag(false);
  await userStore.setLoginUserInfo(null);
  checkOutStatu.value = 3;
  seatData.value.realname = "人员名称";
  seatData.value.roleName = "管制员资质名称";
  seatData.value.realname = "人员名称";
  seatData.value.seatName = "主班管制席";
  handleLogin();
  //调用这个时告诉可以启动定时器了
  faceLoginFail('');
  if (seatListTime.value) {
    clearInterval(seatListTime.value);
    seatListTime.value = ""
  }
};
let keys = [];
//现实告警信息
const handleNotification = (e) => {
  if (keys.length > 0) {
    for (const key of keys) {
      notification.close(key);
    }
    keys = [];
    return;
  }
  let duration = 0;
  for (let item of violationNoticeData.value) {
    if (e == 1) {
      duration = 4;
    } else {
      duration = 0;
    }
    notification.warning({
      key: item.id,
      message: `${dayjs(item.violationTime).format('HH:mm')}   ${item.violationType_dictText}告警${item.noticeCount}次`,
      description: `${item.groupViolation == 0 ? item.realname : item.groupName}\n${item.seatId_dictText}`,
      placement: 'bottomRight',
      bottom: '100px',
      duration,
    });
    keys.push(item.id);
  }
};
/**
 * 临时离岗
 */
const checkOutTemp = async () => {
  try {
    const data = await userStore.checkOutTemp();
    //离岗或者下班打卡都为true
    checkOutStatu.value = 0;
    handleLogin();
    //设置临时离岗标记
    await userStore.setCheckOutTempFlag(true);
    getUserCheckInList();
  } catch (error) { }
};
/**
 * 回岗打卡
 */
const checkIn = async () => {
  try {
    const data = await userStore.checkIn();
    //设置回岗标记
    await userStore.setCheckOutTempFlag(false);
    checkOutStatu.value = 2;
    handleLogin();
    getUserCheckInList();
    getUserSeatList();
  } catch (error) { }
};
const enterLogin = async () => {
  const userStoreToken = useUserStoreWithOut();
  if (!userStoreToken.getToken) {
    isShowLogin.value = true;
    handleChangeCheckCode();
  } else {
    await userStore.onlyFaceLogin();
  }
};
const returnClock = () => {
  isShowLogin.value = false;
};

async function accountLogin() {
  if (!formData.username) {
    createMessage.warn(t('sys.login.accountPlaceholder'));
    return;
  }
  if (!formData.password) {
    createMessage.warn(t('sys.login.passwordPlaceholder'));
    return;
  }
  try {
    loginLoading.value = true;
    const { userInfo } = await userStore.login(
      toRaw({
        password: formData.password,
        username: formData.username,
        captcha: formData.inputCode,
        checkKey: randCodeData.checkKey,
        mode: 'none', //不要默认的错误提示
      })
    );
    if (userInfo) {
      localStorage.setItem("toLogin", "false");
      notification.success({
        message: t('sys.login.loginSuccessTitle'),
        description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realname}`,
        duration: 3,
      });
    }
  } catch (error) {
    notification.error({
      message: t('sys.api.errorTip'),
      description: error.message || t('sys.login.networkExceptionMsg'),
      duration: 3,
    });
    handleChangeCheckCode();
  } finally {
    loginLoading.value = false;
  }
}

function handleLogin() {
  console.log("=====测试===", checkOutStatu.value, loginUserInfo.value)

  //回岗标记 //0 代表离岗，1 代表下岗，2代表回岗，3代表的是上班打卡 4、在岗
  //isLogin为false时显示上班打卡的按钮
  if ((checkOutStatu.value == 3 || !loginUserInfo.value) || (loginUserInfo.value && Object.keys(loginUserInfo.value).length == 0)) {
    isLogin.value = false;
  } else {
    isLogin.value = true;
  }
}
//TODO告警的消息
function getViolationNoticeList() {
  GetViolationNoticeList({
    userId: useUserStore.getLoginUserInfo?.userInfo.id,
    seatId: useUserStore.getLoginUserInfo?.userInfo?.seat.id,
    pageSize: 5,
    pageNo: 1,
    column: 'createTime',
    order: 'desc',
  }).then((res) => {
    if (res.records.length > 0) {
      violationNoticeData.value = res.records;
      let id = userStore.getViolationNoticeId;
      if (id && id != violationNoticeData.value[0].id) {
        notification.warning({
          key: violationNoticeData.value[0].id,
          message: `${dayjs(violationNoticeData.value[0].violationTime).format('HH:mm')}   ${violationNoticeData.value[0].violationType_dictText}告警${violationNoticeData.value[0].noticeCount}次`,
          description: `${violationNoticeData.value[0].groupViolation == 0 ? violationNoticeData.value[0].realname : violationNoticeData.value[0].groupName}\n${violationNoticeData.value[0].seatId_dictText}`,
          placement: 'bottomRight',
          bottom: '100px',
          duration: 3,
        });
        userStore.setViolationNoticeId(violationNoticeData.value[0].id);
      } else if (!id) {
        userStore.setViolationNoticeId(violationNoticeData.value[0].id);
        handleNotification(1);
      }
    }
  });
}
const getIpConfig = async () => {
  let ip = await getLocalIP();
  if (ip && ip.length > 0) {
    let ipStr = ip[0];
    if (ipStr.includes('.1ocal')) {
      message.error("请安装Web RTC 插件并正确配置");
      throw Error("获取ip失败")
    } else {
      clientIp.value = ip[0];
    }
  } else {
    message.error("请安装Web RTC 插件并正确配置");
    throw Error("获取ip失败")
  }
}
const seatList = () => {
  list({ ip: clientIp.value }).then(async res => {
    if (res.records && res.records.length > 0) {
      seatName.value = res.records[0].name;
      //表示禁用，强制下线。
      if (res.records[0].disable == '1' && userStore.getToken) {
        userStore.logout(true);
        //设置回岗标记
        await userStore.setCheckOutTempFlag(false);
        await userStore.setLoginUserInfo(null);
        checkOutStatu.value = 3;
        seatData.value.realname = "人员名称";
        seatData.value.roleName = "管制员资质名称";
        seatData.value.realname = "人员名称";
        seatData.value.seatName = "主班管制席";
        handleLogin();
        //调用这个时告诉可以启动定时器了
        faceLoginFail('');
        if (seatListTime.value) {
          clearInterval(seatListTime.value);
          seatListTime.value = ""
        }
      }
    }
  })
}
onMounted(async () => {
  try {
    await getIpConfig();
    seatList();

    //加载验证码
    handleChangeCheckCode();
    handleLogin();
    timerFunction();
  } catch (error) {

  }


});

function getLocalIP() {
  return new Promise((resolve, reject) => {
    const pc = new RTCPeerConnection();
    const ips = [];

    pc.createDataChannel(""); // Create a dummy data channel
    pc.createOffer()
      .then((offer) => pc.setLocalDescription(offer)) // Set the local description
      .catch((error) => console.error("Error creating offer: ", error));

    pc.onicecandidate = (event) => {
      console.log("ICE Candidate Event:", event); // Debug candidate event

      if (!event || !event.candidate) {
        // No more candidates
        // callback(ips);
        console.log("数据：：", ips)
        resolve(ips);
        return;
      }

      const candidateString = event.candidate.candidate || "";
      // console.log("Candidate String:", candidateString); // Debug candidate string

      const parts = candidateString.split(" ");
      if (parts.length > 4) {
        const ip = parts[4];
        if (!ips.includes(ip)) {
                    ips.push(ip); // Add unique IPs
                }
            }
           
        };
    })
    
}





  /**
   *
   * @param num 0全部,1为离岗倒计时，2为告警通知，3为获取人脸登录结果，4在岗时长定时器
   */
  const clearTime = (num: number) => {
    switch (num) {
      case 0:
        if (intervalOutTime.value) {
          clearInterval(intervalOutTime.value);
          intervalOutTime.value = '';
        }
        if (violationTime) {
          clearInterval(violationTime);
          violationTime = '';
        }
        if (faceLoginResultTime) {
          clearInterval(faceLoginResultTime);
          faceLoginResultTime = '';
        }
        if(seatListTime.value){
          clearInterval(seatListTime.value);
          seatListTime.value = '';
        }
        break;
      case 1:
        if (intervalOutTime.value) {
          clearInterval(intervalOutTime.value);
          intervalOutTime.value = '';
        }
        break;
      case 2:
        if (violationTime) {
          clearInterval(violationTime);
          violationTime = '';
        }
        break;
      case 3:
        if (faceLoginResultTime) {
          clearInterval(faceLoginResultTime);
          faceLoginResultTime = '';
        }
        break;
      case 4:
        if (durationTimeIn.value) {
          clearInterval(durationTimeIn.value);
          durationTimeIn.value = '';
        }
        break;
      default:
        break;
    }
  };
  onUnmounted(() => {
    clearTime(0);
  });
</script>

<style lang="less" scoped>
@import '/@/assets/loginmini/style/home.less';
@import '/@/assets/loginmini/style/base.less';

:deep(.ant-input:focus) {
  box-shadow: none;
}

.aui-get-code {
  float: right;
  position: relative;
  z-index: 3;
  background: #ffffff;
  color: #1573e9;
  border-radius: 100px;
  padding: 5px 16px;
  margin: 7px;
  border: 1px solid #1573e9;
  top: 12px;
}

.aui-get-code:hover {
  color: #1573e9;
}

.code-shape {
  border-color: #dadada !important;
  color: #aaa !important;
}

:deep(.jeecg-dark-switch) {
  position: absolute;
  margin-right: 10px;
}

.aui-link-login {
  height: 42px;
  padding: 10px 15px;
  font-size: 14px;
  border-radius: 8px;
  margin-top: 15px;
  margin-bottom: 8px;
  flex: 1;
  color: #fff;
}

.aui-phone-logo {
  position: absolute;
  margin-left: 10px;
  width: 60px;
  top: 2px;
  z-index: 4;
}

.top-3 {
  top: 0.45rem;
}
</style>

<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-mini-login';
@dark-bg: #293146;

html[data-theme='dark'] {
  .@{prefix-cls} {
    background-color: @dark-bg !important;
    background-image: none;

    &::before {
      background-image: url(/@/assets/svg/login-bg-dark.svg);
    }

    .aui-inputClear {
      background-color: #232a3b !important;
    }

    .ant-input,
    .ant-input-password {
      background-color: #232a3b !important;
    }

    .ant-btn:not(.ant-btn-link):not(.ant-btn-primary) {
      border: 1px solid #4a5569 !important;
    }

    &-form {
      background: @dark-bg !important;
    }

    .app-iconify {
      color: #fff !important;
    }

    .aui-inputClear input,
    .aui-input-line input,
    .aui-choice {
      color: #c9d1d9 !important;
    }

    .aui-formBox {
      background-color: @dark-bg !important;
    }

    .aui-third-text span {
      background-color: @dark-bg !important;
    }

    .aui-form-nav .aui-flex-box {
      color: #c9d1d9 !important;
    }

    .aui-formButton .aui-linek-code {
      background: @dark-bg !important;
      color: white !important;
    }

    .aui-code-line {
      border-left: none !important;
    }

    .ant-checkbox-inner,
    .aui-success h3 {
      border-color: #c9d1d9;
    }

    //update-begin---author:wangshuai ---date:20230828  for：【QQYUN-6363】这个样式代码有问题，不在里面，导致表达式有问题------------
    &-sign-in-way {
      .anticon {
        font-size: 22px !important;
        color: #888 !important;
        cursor: pointer !important;

        &:hover {
          color: @primary-color !important;
        }
      }
    }

    //update-end---author:wangshuai ---date:20230828  for：【QQYUN-6363】这个样式代码有问题，不在里面，导致表达式有问题------------
  }

  input.fix-auto-fill,
  .fix-auto-fill input {
    -webkit-text-fill-color: #c9d1d9 !important;
    box-shadow: inherit !important;
  }

  .ant-divider-inner-text {
    font-size: 12px !important;
    color: @text-color-secondary !important;
  }

  .aui-third-login a {
    background: transparent;
  }
}

html[data-theme='dark'] {
  .aui-formBox1 {
    background-color: #2b2a2a;
    padding: 20px;
    border-radius: 10px;
  }

  .card-bottom {
    display: flex;
    padding: 0 20px;
    justify-content: space-between;

    .card-bottom-label {
      font-weight: bold;
      color: #fff;
    }

    .card-bottom-value {
      color: #018ffb;
    }

    .card-bottom-red {
      color: red;
    }
  }

  .card-content {
    text-align: center;
    color: #fff;
    position: relative;

    .card-ling {
      position: absolute;
      top: 0;
      right: 0;
    }
  }
}

.aui-formBox1 {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
}

.sys-title {
  text-align: center;
  font-size: 24px !important;
  font-weight: 800 !important;
}

.card-bottom {
  display: flex;
  padding: 0 20px;
  justify-content: space-between;

  .card-bottom-label {
    font-weight: bold;
    color: #000;
  }

  .card-bottom-value {
    color: #018ffb;
  }

  .card-bottom-red {
    color: red;
  }
}

.card-content {
  text-align: center;
  color: #000;
  position: relative;

  .card-ling {
    position: absolute;
    top: 0;
    right: 0;
  }
}

.login-card {
  box-shadow: -7px 13px 90px 0px rgba(0, 0, 0, 0.1);
}

.login-card-bottom {
  margin-top: 30px !important;
  display: flex;
  gap: 10px;

  .login-card-bottom-card {
    width: 100px;
    height: 100px;
    padding: 10px;
    text-align: center;
    color: #fff;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    cursor: pointer;
  }

  .blue-bg {
    background-color: #409eff;
  }

  .green-bg {
    background-color: #67c23a;
  }

  .yellow-bg {
    background-color: #e6a23c;
  }

  .red-bg {
    background-color: #f56c6c;
  } }

  .text-color {
    color: #409eff;
    cursor: pointer;
  }

  .login-spin {
    background-color: rgba(255, 255, 255, 0.8);
  }
</style>
